<template>
    <div class="tmpl">
        <nav-bar title="购物车"></nav-bar>
        <div class="pay-detail" v-if="product">
            <ul>
                <li class="p-list" >
<!--                    <mt-switch></mt-switch>-->
                    <img src="">
                    <div class="pay-calc">
                        <p ></p>
                        <div class="calc">
                            <span>￥goods.sell_price</span>
                            <span >-</span>
                            <span >‘goods.num</span>
                            <span >+</span>
                            <a href="javascript:;" >删除</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="show-price">
            <div class="show-1">
                <p>总计(不含运费):</p>
                <span>已经选择商品payment.num件，总价￥payment.sum元</span>
            </div>
            <div class="show-2">
                <mt-button type="danger" size="large">去结算</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
    //引入商品操作工具对象
    import prodTools from "../prodTools";
    //通知底部变更数据
    import connect from "../connect";
    export default {
        data(){
            return {
                product:{}
            }
        },
        // methods:{
        //     add(i){
        //         this.goodsList[i].num++;
        //         connect.$emit('addShopcart',1);
        //         prodTools.addOrUpdate({
        //             id:this.goodsList[i].id,
        //             num:1, //如果存在，追加1，否则新增1
        //         })
        //
        //
        //     },
        //     sub(i){
        //         if(this.goodsList[i].num<= 1) return;
        //         this.goodsList[i].num--;
        //         connect.$emit('addShopcart',-1);//加上-1就是减一
        //         prodTools.addOrUpdate({
        //             id:this.goodsList[i].id,
        //             num:-1, //如果存在，追加1，否则新增1
        //         })
        //     },
        //     del(i){
        //         //删除内存，删除storage,通知下方number小球
        //         let goods = this.goodsList[i];
        //         //删除storage
        //         prodTools.delete(goods.id)
        //         //通知下方number小球
        //         connect.$emit('addShopcart',-goods.num);
        //         //删除内存
        //         this.goodsList.splice(i,1);
        //     }
        // }
        // ,
        created() {
            this.product=prodTools.getAll();

            //发起请求，将数据挂上
            // this.$ajax.get(url)
            //     .then(res=>{
            //         this.goodsList = res.data.message;
            //         //prods{"87":4,"89":10,"93":11,"95":16}   ele.id-> 87
            //         this.goodsList.forEach((ele,index)=>{
            //             if(prods[ele.id]){ //数量
            //                 //在vue中添加属性，是没有办法做到响应，setter
            //                 // ele.num = prods[ele.id];
            //                 // ele.isPicked = true;
            //                 //添加属性一定要this.$set
            //                 this.$set(ele,'num',prods[ele.id]);
            //                 this.$set(ele,'isPicked',true);
            //
            //             }
            //         })

        }
// 计算属性
        // computed:{
        //     payment(){
        //         // 1:如果商品没有被选中，遍历数组中，哪些商品有被选中，如果是
        //         // 2:计算总金额= 单价 * 件数
        //         // 3:将以上总金额累计
        //         // 4:如果是 +元素的num 件数
        //         let num = 0;
        //         let sumaxios = 0;
        //         this.goodsList.forEach((ele)=>{
        //             if(ele.isPicked){
        //                 //选中
        //                 sum += ele.num * ele.sell_price;//总价
        //                 num += ele.num;//金额
        //             }
        //         })
        //         return {
        //             num,sum
        //         };
        //     }
        // }

    }



</script>
<style scoped>
    .pay-detail ul li {
        list-style: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        margin-bottom: 3px;
    }

    .pay-detail ul {
        padding-left: 5px;
        margin-top: 5px;
    }

    .pay-detail ul li img {
        width: 80px;
        height: 80px;
        display: inline-block;
        vertical-align: top;
        margin-top: 10px;
    }

    .pay-detail ul li >:nth-child(1),
    .pay-detail ul li >:nth-child(3) {
        display: inline-block;
    }

    .pay-calc p {
        display: inline-block;
        width: 250px;
        overflow: hidden;
        color: blue;
        font-size: 15px;
        margin-bottom: 10px;
    }

    .pay-detail ul li >:nth-child(1) {
        line-height: 80px;
    }

    .calc:nth-child(1) {
        color: red;
        font-size: 20px;
    }

    .calc span:not(:nth-child(1)) {
        border: 1px solid rgba(0, 0, 0, 0.3);
        display: inline-block;
        width: 20px;
        text-align: center;
    }

    .calc a {
        margin-left: 20px;
    }

    .show-1,
    .show-2 {
        display: inline-block;
    }

    .show-1,
    .show-2 {
        margin-left: 30px;
    }

    .show-price {
        background-color: rgba(0, 0, 0, 0.2);
    }
</style>
